<template>
  <view
    class="page"
    :class="{
      bmborder: bmLine,
      clickable: clickable,
    }"
    @click="handleClick"
  >
    <u-image
      v-if="image"
      show-loading
      :show-menu-by-longpress="false"
      :src="image"
      :width="imageSize"
      :height="imageSize"
      :radius="imageRadius"
    />
    <view
      class="f-center"
      :style="{
        height: imageSize,
      }"
    >
      <u-text :text="title" :size="size" :color="color" :lines="lines" :bold="bold" />
      <slot name="center" />
      <u-text v-if="subTitle" :text="subTitle" :size="subSize" :color="subColor" :lines="subLines" />
      <slot name="bottom" />
    </view>
    <slot name="right" />
  </view>
</template>

<script>
export default {
  props: {
    // 图片路径 (不传不显示)
    image: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    // 图片大小
    imageSize: {
      type: String,
      default: "150rpx",
    },
    // 图片圆角
    imageRadius: {
      type: String,
      default: "10rpx",
    },
    // 标题内容
    title: {
      type: String,
      default: "",
    },
    // 标题颜色
    color: {
      type: String,
      default: "#222222",
    },
    // 标题字体大小
    size: {
      type: String,
      default: "28rpx",
    },
    // 标题加粗
    bold: {
      type: Boolean,
      default: true,
    },
    // 标题显示行数
    lines: {
      type: String,
      default: "2",
    },
    // 副标题内容
    subTitle: {
      type: String,
      default: "",
    },
    // 副标题颜色
    subColor: {
      type: String,
      default: "#979797",
    },
    // 副标题字体大小
    subSize: {
      type: String,
      default: "24rpx",
    },
    // 副标题显示行数
    subLines: {
      type: String,
      default: "1",
    },
    // 是否显示下划线
    bmLine: {
      type: Boolean,
      default: true,
    },
    // 点击反馈
    clickable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    // 处理点击事件
    handleClick() {
      this.$emit("click", {
        id: this.index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  display: flex;
  justify-content: flex-start;
  .f-center {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
.bmborder {
  border-bottom: 1rpx solid #d9d9d999;
}
.clickable:active {
  background-color: #fcfcfc;
}
</style>
